import { Layout } from 'antd';
import React, { useState } from 'react';
const { Content, Footer } = Layout;
import Menus from '/@/Layouts/component/Sidebar/MenusItem';
import { Outlet } from 'react-router-dom';
import NarBar from '/@/Layouts/component/navBar/index';
import styles from '/@/Layouts/index.module.scss';
import GlobalContext from '/@/Layouts/GlobalContext';
import TagsView from '/@/Layouts/component/TagsView';
import Menushrink from '../component/navBar/Menushrink';
import Breadcrumb from '../component/navBar/Breadcrumb';
import { useStateThemeConfig } from '/@/store/hooks/theme';
import { useStateCurrFull } from '/@/store/hooks/menu';
import CloseFull from '/@/Layouts/component/CloseFull';
export default function Circular() {
  const [collapsed, setCollapsed] = useState(false);
  const isLockScreen = useStateCurrFull();
  const { topBarHight, IsfixedHead, IsTagsView, IsFooter, IsCrumbs } = useStateThemeConfig();
  const shrinkFun = () => {
    setCollapsed((collapsed) => !collapsed);
  };
  return (
    <GlobalContext.Provider value={{ collapsed, shrinkFun }}>
      {isLockScreen && <CloseFull></CloseFull>}
      <Layout className={styles.Layout}>
        {!isLockScreen && (
          <NarBar
            className={styles.layout_navbar}
            style={{
              height: topBarHight + 'px',
              lineHeight: topBarHight + 'px',
              borderBottom: '1px solid #dcdfe6',
            }}
          ></NarBar>
        )}
        <Layout>
          {!isLockScreen && <Menus />}
          <Content style={{ overflowY: 'auto' }}>
            <div
              style={{
                position: IsfixedHead ? 'sticky' : 'unset',
                zIndex: 1,
                width: '100%',
              }}
            >
              {IsCrumbs && (
                <div
                  style={{
                    background: '#fff',
                    display: 'inline-flex',
                    padding: '0 15px',
                    height: '45px',
                    width: '100%',
                    boxShadow: '0 1px 4px rgb(0 21 41 / 8%)',
                    zIndex: '999',
                    alignItems: 'center',
                  }}
                >
                  <Menushrink color='#606266' />
                  <Breadcrumb color='#606266' />
                </div>
              )}

              {!isLockScreen && IsTagsView && <TagsView></TagsView>}
            </div>
            <div style={{ padding: '15px' }}>
              <Outlet></Outlet>
            </div>
            {IsFooter && (
              <Footer className={styles['layout_footer']}>
                <div>react-antd-admin，Made by lyt with ❤️</div>
                <div>@ 长沙市 xxx 公司版权所有</div>
              </Footer>
            )}
          </Content>
        </Layout>
      </Layout>
    </GlobalContext.Provider>
  );
}
